<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
    xmlns:calli="http://callimachusproject.org/rdf/2009/framework#"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
    xmlns:foaf="http://xmlns.com/foaf/0.1/">
<head>
    <title resource="?this">{rdfs:label}</title>
    <link rel="help" href="../../callimachus-for-web-developers" target="_blank" title="Help" />
    <link rel="stylesheet" href="../assets/jquery-validate.password/jquery.validate.password.css" />
    <script type="text/javascript" src="../assets/jquery-validate.password/lib/jquery.validate.js"></script>
    <script type="text/javascript" src="../assets/jquery-validate.password/jquery.validate.password.js"></script>
    <script type="text/javascript" src="../assets/jshash/md5.js"></script>
    <script type="text/javascript">//<![CDATA[
        jQuery(function($) {
            var uri = $('body').attr("resource");
            var credential = calli.getUserIri();
            if (!$('#email').length) {
                $('#email-div').append('<input id="email" name="email" type="text" class="form-control email" />');
            }
            $("#form").validate({submitHandler: function(form) {
                var hash1, hash2, hash3, hash4;
                var name = $("#name").text();
                var realm = $("#realm").text();
                var email = $("#email").val();
                var current = $("#current").val();
                var password = $("#password").val();
                if (current) {
                    hash1 = hex_md5(name + ':' + realm + ':' + current);
                    hash2 = hex_md5(email + ':' + realm + ':' + current);
                }
                if (password) {
                    hash3 = hex_md5(name + ':' + realm + ':' + password);
                    hash4 = hex_md5(email + ':' + realm + ':' + password);
                }
                jQuery.ajax({type: 'POST', url: form.action,
                    traditional: true,
                    data: {
                        email: email,
                        current: [hash1, hash2],
                        password: [hash3, hash4]
                    },
                    success: function() {
                        if ($('#password').val() && credential && credential == uri) {
                            // need to log user out gracefully since they changed their password
                            var e = jQuery.Event("calliLogout");
                            e.location = '/';
                            $(document).trigger(e);
                        } else {
                            window.location = '?view';
                        }
                    }
                });
                return false;
               }});
        });
        // ]]>
    </script>
</head>
<body resource="?this">
    <h1>Change password of <span property="rdfs:label" /></h1>
    <div id="sidebar">
        <aside>
            <p>Your e-mail address is used to reset your password</p>
        </aside>
        <aside>
            <h3>Choosing a good password</h3>
            <ul>
                <li>Never share your password to colleagues, friends, or family members, even when asked</li>
                <li>Don't choose passwords that relate to you as a person</li>
                <li>Don't use your last name, your spouse's name, the name of your pet, the date of birth, your favourite flower etc.</li>
                <li>Use complex multiple word pass phrases, never a single word</li>
            </ul>
        </aside>
    </div>
    <div style="display:none">
        <span id="name" property="calli:name" />
        <span rev="calli:hasComponent" resource="?space">
            <span rev="calli:authNamespace" resource="?digest">
                <span id="realm">{calli:authName}</span>
            </span>
        </span>
    </div>
    <form role="form" id="form" method="POST" action="?password" autocomplete="off">
        <fieldset>
            <div class="form-group">
                <label for="email">E-mail address</label>
                <div id="email-div" class="controls">
                    <input id="email" name="email" value="{calli:email}" type="email" class="form-control" />
                </div>
            </div>
            <div class="hbox">
                <div class="form-group">
                    <label for="current">Current password</label>
                    <div class="controls">
                        <input id="current" type="password" class="form-control" /><!-- not required if somebody else -->
                    </div>
                </div>
                <div class="form-group">
                    <label for="password">New password</label>
                    <div class="controls">
                        <input id="password" type="password" password="#name" class="form-control password" onkeyup="$(this).valid()" />
                        <div class="password-meter">
                            <label for="password" class="password-meter-message" />
                            <div class="password-meter-bg">
                                <div class="password-meter-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button id="save" type="submit" class="btn btn-primary">Save</button>
                <button id="cancel" type="button" onclick="window.location.replace('?view')" class="btn btn-default">Cancel</button>
            </div>
        </fieldset>
    </form>
</body>
</html>
